require(['config'], () => {
  require(['jquery', 'artTemplate', 'loadHeaderFooter', 'jquery.cookie'], ($, template) => {
    /***************************************************************************/
    /** ************************* 初始化显示购物车数据**************************/
    /***************************************************************************/
    // 从本地存储中读取购物车数组的数据
    // const cart = JSON.parse($.cookie('cart'))
    let cart = JSON.parse(localStorage.getItem('cart')) || []
    // 渲染模板引擎
    const html = template('cart-template', {cart})
    $('.cart-body').html(html)
    // 计算合计金额
    calcTotal()
    
    /***************************************************************************/
    /** ************************* 删除购物车商品  ******************************/
    /***************************************************************************/
    $('.cart-body').on('click', '.remove', e => {
      // e.preventDefault()
      // 获取待删除商品的 id
      console.log('in .... ')
      const { id } = $(e.currentTarget).parents('tr').data('prod')
      console.log('id:', id)
      // 从数组中删除当前待删除商品的信息
      cart = cart.filter(prod => prod.id !== id)
      // 将修改后的数组保存回本地存储中
      localStorage.setItem('cart', JSON.stringify(cart))
      // 从 DOM 树中删除当前行
      $(e.currentTarget).parents('tr').remove()
      // 计算合计
      calcTotal()
      // 阻止事件传播与默认行为
      return false
    })
    
    /***************************************************************************/
    /** ************************* 修改购物车商品数量*****************************/
    /***************************************************************************/
    const modifyAmount = e => {
      // 当前所在行
      const _tr = $(e.currentTarget).parents('tr')
      // 获取当前行中商品原始数量与商品id、价格
      let { amount, id, price } = _tr.data('prod')
      // 判断加或减
      if ($(e.currentTarget).is('.minus')) { // 减数量
        if (amount > 1) {
          amount -= 1
        }
      } else if ($(e.currentTarget).is('.plus')) { // 加数量
        amount += 1
      } else { // 输入数量
        // 当前文本框中输入的值
        const val = Number($(e.currentTarget).val())
        if (val < 1) { // 如果输入小于 1 的值，则还原为原始数量
          $(e.currentTarget).val(amount)
        } else {
          amount = val
        }
      }
      // 修改数组中元素值
      cart.forEach(prod => {
        if (prod.id === id) {
          prod.amount = amount
        }
      })
      // 重新保存购物车数组到本地存储中
      localStorage.setItem('cart', JSON.stringify(cart))

      // 重新渲染购物车
      // const html = template('cart-template', {cart})
      // $('.cart-body').html(html)

      // 更新表格中显示的当前商品数量与小计金额
      $(e.currentTarget).siblings('input').val(amount)
      $(e.currentTarget).parent().next().html((amount * price).toFixed(2))
      // 更新当前行中缓存的商品数据
      const prod = cart.find(p => p.id === id)
      _tr.data('prod', prod)

      calcTotal()
    }

    $('.cart-body').on('click', '.minus, .plus', modifyAmount)
    $('.cart-body').on('blur', '.amount', modifyAmount)

    /***************************************************************************/
    /** ************************* 全选、取消全选*****************************/
    /***************************************************************************/
    $('.check_all').on('click', e => {
      // 当前复选框的选中状态
      const checked = $(e.target).prop('checked')
      // 修改所有商品的选中状态
      $('.prod_check').prop('checked', checked)
      // 计算合计
      calcTotal()
    })
    $('.prod_check').on('click', e => {
      // $('.prod_check:checked')：筛选出所有选中的类名为 .prod_check 元素
      $('.check_all').prop('checked', $('.prod_check:checked').length === cart.length)
      calcTotal()
    })

    /** 计算合计金额 */
    function calcTotal() {
      let sum = 0
      $('.prod_check:checked').each((index, element) => {
        const {price, amount} = $(element).parents('tr').data('prod')
        sum += price * amount
      })
      // 显示合计金额
      $('.total').html(sum.toFixed(2))
    }
  })
})
